<template>
<div class="login_box">
    <div class="image">
        <img src="@/assets/images/bg-4.jpg" alt="">
    </div>
    <el-form class="login" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <h2>Hi Welcome</h2>
        <el-form-item label="账号" prop="name">
            <el-input v-model="loginForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button type="info" @click="resetLoginForm">注册</el-button>
        </el-form-item>
        <div class="other">
            <router-link to="/forgetPass">
                <p>忘记密码</p>
            </router-link>
            <router-link to="/registerUser">
                <p>注册用户</p>
            </router-link>
        </div>
    </el-form>

</div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            loginForm: {
                name: 'admin',
                password: '123456'
            },
            //这是表单验证规则对象
            loginFormRules: {
                //验证用户名是否合法
                name: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    { min: 3, max: 10, message: "长度在3到10个字符之间", trigger: "blur" }
                ],
                //验证密码是否合法
                password: [
                    { required: true, message: "请输入登陆密码", trigger: "blur" },
                    { min: 6, max: 15, message: "长度在6到15个字符之间", trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        onSubmit() {
            // this.$refs.loginFormRef.validate(() => {
            //     if (valid) {
            //         // window.sessionStorage.setItem("token", '1');
            //         this.$router.push('Home');
            //         return this.$message.success('登陆成功');
            //     } else {
            //         return this.$message.error('登陆失败');
            //     }
            // })
                let data = {
                        user_name: this.name,
                        user_pass: this.password,
                    }
                this.$axios({
                    method: 'GET',
                    url: 'http://127.0.0.1:4000/login',
                    // data: {
                    //     user_name: this.name,
                    //     user_pass: this.password,
                    // }
                    params: data
                })
                .then(
                    reponse => {
                        console.log(reponse.status);
                        alert(JSON.stringify(reponse));
                        // this.$router.push('/welcome')
                        localStorage.setItem('user-name', JSON.stringify(reponse.data[0].user_name))
                        localStorage.setItem('user-pass', JSON.stringify(reponse.data[0].user_pass))
                        localStorage.setItem('user-rePass', JSON.stringify(reponse.data[0].user_rePass))
                    }
                )

        },
        //重置表单
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        }
    }
}
</script>

<style scoped>
.login_box {
    /* border-radius: 15px; */
    /* color: #333333; */
    /* text-align: center; */
    /* margin-top: 5%; */
    margin: 3% 2%;
    display: flex;
    align-items: center;
}

.image {
    flex: 2;
    margin-right: 20px;

}

.image img {
    width: 100%;
    border-radius: 0.5rem;

}

.login {
    flex: 1;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
    border-radius: .5rem;
    height: 498px;
    box-sizing: border-box;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100px;
    /* margin-top: 20px; */
}

.login h2 {
    padding-top: 20px;
    padding-bottom: 50px;
}

.el-input {
    width: 300px;
}

.login .other {
    display: flex;
    justify-content: center;

}

.login .other a {
    padding-top: 30px;
    padding-bottom: 0px;
    margin: 0 20px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.685);
}

.login .other a:hover {
    color: rgba(0, 0, 255, 0.514);
    font-size: 18px;
}
</style>
